<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kissy-第7个效果</title>
<link href="js/css/base.css" />
<style>
* {
	margin:0;
	padding:0;
	word-break:break-all;
}
html,body{
	_background-image:url(about:blank);
    _background-attachment:fixed;
}
body {
	width: 100%;
	background:#FFF;
	color:#333;
	font:12px/1.5em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-size:1em;
}
a {
	color:#2B93D2;
	text-decoration:none;
}
a:hover {
	color:#E31E1C;
	text-decoration:underline;
}
ul, li {
	list-style:none;
}
fieldset, img {
	border:none;
}
div.bg-main {
	width: 100%;
	position:fixed;
	left:0;
	top:0;
	background:#333;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	opacity: 0.6;
	display:none;
	z-index: 999;
}
div.bg-main {
	_position:relative;
	_bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));
}
.btn {
	padding: 3px;
	border: 1px solid #ccc;
	cursor:pointer;
}
.close {
	cursor:pointer;
}
.tanbox-text {
	width: 500px;
	height:400px;
	position: absolute;
	left:50%;
	top:200px;
	margin-left: -250px;
	_margin-top: 200px;
	background-color:#fff;
}
</style>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<script>
KISSY.ready(function(S){
	var $=KISSY.all;
	var Event = S.Event,DOM = S.DOM;
	var height = $('body').height();
    $('.btn').on('click',function(){
            $('div.bg-main').show().height(height);
			//$('body').height(height);
    });
    $('.close').on('click',function(){
            $('div.bg-main').hide();
    });    
});
</script>
</head>
<body>
<div class="tanbox"> <span class="btn">弹出层</span>
  <div class="bg-main">
    <div class="tanbox-text"><strong class="close">关闭</strong></div>
  </div>
  <div style="height:999px;"></div>
</div>
</body>
</html>
